import React, {
    Component
} from 'react';
import {
    Text,
    FlatList,
    View,
    InteractionManager,
    TouchableOpacity,
    Image
} from 'react-native';

import {NavigationActions} from 'react-navigation'

import CLNavigatorHeader from '../../component/CLNavigatorHeader'
import {getProductBrands, chooseBrand} from './actions';

import {connect} from 'react-redux';

import {naviBack} from '../../navigatorApp/actions'

class ProductBrand extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="选择品牌"
        />,
    });

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.props.getProductBrands();
        });
    }

    _chooseBrand = (item) => {
        this.props.chooseBrand(item.name);
        this.props.naviBack(this.props.homekey);
    };

    _renderItem = ({item}) => {
        return <TouchableOpacity onPress={() => {
            this._chooseBrand(item)
        }}>
            <View style={{flex: 1, flexDirection: 'row', height: 60, alignItems: 'center'}}>
                <Image style={{width: 50, height: 50}} source={{uri: item.logo}}/>
                <Text style={{fontSize: 16, marginLeft: 10}}>{item.name}</Text>
            </View>
        </TouchableOpacity>
    }

    _sepa = () => {
        return (<View style={{height: 1, backgroundColor: '#eee'}}></View>)
    }

    render() {
        return <View style={{flex: 1, backgroundColor: "white"}}>
            <FlatList
                style={{flex: 1}}
                ItemSeparatorComponent={this._sepa}
                data={this.props.productBrands}
                renderItem={this._renderItem}
            />
        </View>
    }
}

const mapStateToProps = (state) => {
    return {
        token: state.mainmodel.token,
        productBrands: state.product.productBrands,
        homekey: state.mainmodel.homekey,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        naviBack: (routerName) => {
            dispatch(naviBack(routerName));
        },
        getProductBrands: () => {
            dispatch(getProductBrands());
        },
        chooseBrand: (item) => {
            dispatch(chooseBrand(item));
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(ProductBrand);
